<ui:composition template="../template/plantilla_01.xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:fn="http://java.sun.com/jsp/jstl/functions" >

    <f:metadata>        
        <f:viewParam name="productoBuscar" value="#{catalogoBean.productId}"/>        
        <f:event type="preRenderView" listener="#{catalogoBean.cargarCatalogo}" />                
    </f:metadata>

    <ui:define name="head">
          
        <h:outputStylesheet library="css" name="catalogo.css"/>
        
    </ui:define>
    
    <ui:define name ="panelCentral" >
        
        <h:panelGroup layout="block" styleClass="separadorBanner" rendered="#{not usuarioSessionBean.estaRegistrado}"></h:panelGroup>
        
        <h:form id="formulario" prependId="false" target="_blank"  >            

            <p:panel id="fichaProducto" styleClass="fichaProducto" >

                <div style="position: relative; float: right; " >
                    <p:commandButton icon="btnVolver" value="Volver"
                                     action="#{catalogoBean.verCatalogo}"
                                     immediate="true"
                                     title="Volver a la vista del catálogo"
                                     process="@this"
                                     update="@form" >
                    </p:commandButton>
                </div>

                <p:messages showDetail="true" rendered="#{empty catalogoBean.itemCatalogo}" />

                <h:panelGroup layout="block" rendered="#{not empty catalogoBean.itemCatalogo}" />          

                <!-- DESCRIPCION DEL PRODUCTO -->
                <div id="descProd">
                <h1><h:outputText value="#{catalogoBean.itemCatalogo.codigo} - #{catalogoBean.itemCatalogo.descrp}"/></h1>
               </div>

                <!-- IMAGEN DEL PRODUCTO -->
                <div style="position: relative; width:200px; margin-right:10px; float: left;">

                <!--
                <div id="divFavorito" class="contIconFav" >
                    <p:commandButton  icon="iconoFavorito" style="width:25px; height:20px;"
                                      title="Agregar a favoritos"
                                      rendered="#{not i.favorito}"
                                      actionListener="#{favoritosBean.agregarFavorito(i)}" 
                                      update=":formulario:gCatalogo, :formulario:divDetalle " >
                    </p:commandButton> 

                    <p:commandButton  icon="iconoFavoritoOk" style="width:25px; height:20px;"                                  
                                      actionListener="#{favoritosBean.eliminarFavorito(i)}"
                                      rendered="#{i.favorito}" 
                                      title="Quitar de favoritos"
                                      update=":formulario:gCatalogo, :formulario:divDetalle " >
                    </p:commandButton>                
                </div>
                -->
                    <p:lightBox id="lightbox3" widgetVar="selectIframe"  rendered="#{not empty catalogoBean.itemCatalogo.imggra}" >
                        <h:outputLink value="#{aplicacionBean.parametro.pathImagenesProductos}#{catalogoBean.itemCatalogo.imggra}.jpg"  title="#{catalogoBean.itemCatalogo.descrp}">
                            <p:graphicImage id="imgPaligi" value="#{aplicacionBean.parametro.pathImagenesProductos}#{catalogoBean.itemCatalogo.imgchi}.jpg"
                                            width="200" height="200" rendered="#{not empty catalogoBean.itemCatalogo.imgchi}" />
                        </h:outputLink>
                    </p:lightBox>

                    <p:graphicImage id="imgPrd" value="#{aplicacionBean.parametro.pathImagenesProductos}#{catalogoBean.itemCatalogo.imgchi}.jpg" width="200" height="200"
                                    rendered="#{not empty catalogoBean.itemCatalogo.imgchi and empty catalogoBean.itemCatalogo.imggra}"                            />

                    <p:graphicImage value="#{aplicacionBean.parametro.pathImagenesProductos}intercap.jpg" width="200" height="200" rendered="#{empty catalogoBean.itemCatalogo.imgchi}"
                                    style="border: 1px solid lightgrey;" />
                </div>

                <!-- DATOS DEL PRODUCTO -->
                <div class="datosProducto">            

                    <div style="position: relative; width: 100%; float: left; ">

                        <h:panelGrid width="300" columns="2" columnClasses="colLabel,colDato,colLabel,colDato" >

                            <h:outputText value="Tipo de producto:" />
                            <h:outputText value="#{catalogoBean.itemCatalogo.tipoProducto}" />

                            <h:outputText value="Nro parte:" rendered="#{not empty catalogoBean.itemCatalogo.nroParte}" />
                            <h:outputText value="#{catalogoBean.itemCatalogo.nroParte}" rendered="#{not empty catalogoBean.itemCatalogo.nroParte}"  />

                            <h:outputText value="Sub-tipo:"  />
                            <h:outputText value="#{catalogoBean.itemCatalogo.subtipo}" />

                            <h:outputText value="Origen:"  />
                            <h:outputText value="Nacional" rendered="#{catalogoBean.itemCatalogo.importado == 'N'}"  />
                            <h:outputText value="Importado" rendered="#{catalogoBean.itemCatalogo.importado == 'S'}"  />

                            <h:outputText value="Marca:" />
                            <h:outputText value="#{catalogoBean.itemCatalogo.marca}" />

                            <h:outputText value="Presentación:" />
                            <h:outputText value="#{catalogoBean.itemCatalogo.unidadConversion} #{catalogoBean.itemCatalogo.factorConversion} #{catalogoBean.itemCatalogo.unidadMedida}" />



                        </h:panelGrid>
                    </div>            
                </div>

                <!-- INFORMACION DE STOCK -->
                <p:outputPanel styleClass="contStock"  rendered="#{usuarioSessionBean.estaRegistrado}">
                    <ui:include  src="../inventario/informacionStock.xhtml" />
                </p:outputPanel>




                <!-- BOTONES DE ACCIONES -->
                <div class="infoBotones">
                 <div class="infoPrecio">


                    <c:if test="#{usuarioSessionBean.estaRegistrado}" >

                               <span style="font-size: 14px; font-weight:bold;">$ Venta c/I.V.A.</span>
                               <br/>
                               <h:panelGroup>
                                    <h:outputText value="#{monedaBean.moneda.codcof} " style="font-size: 20px !important; color: #729b05;" />
                                    <h:outputText value="#{catalogoBean.itemCatalogo.precioFinal*monedaBean.cotizacionDelDia.cotizacion/monedaBean.moneda.cotizacion}"
                                                  style="font-size: 20px !important;  color: #729b05;"
                                                  rendered="#{catalogoBean.itemCatalogo.moneda == 'USD'}" >
                                        <f:convertNumber pattern="0.00" />
                                    </h:outputText>
                                    <h:outputText value="#{catalogoBean.itemCatalogo.precioFinal/monedaBean.moneda.cotizacion}"
                                                  style="font-size:20px !important;  color:#729b05;"
                                                  rendered="#{catalogoBean.itemCatalogo.moneda == 'ARS'}" >
                                        <f:convertNumber pattern="0.00" />
                                    </h:outputText>
                                </h:panelGroup>

                            </c:if>

                            <c:if test="#{usuarioSessionBean.estaRegistrado}" >

                                <h:outputText value="$ Marcado c/I.V.A.: " style="font-size: 14px;" rendered="#{catalogoBean.porcMarcacion>0}" />
                                <h:panelGroup rendered="#{catalogoBean.porcMarcacion>0}">
                                    <h:outputText value="#{monedaBean.moneda.codcof} " style="font-size: 14px; font-weight: bold;" />
                                    <h:outputText value="#{catalogoBean.itemCatalogo.precioFinal*monedaBean.cotizacionDelDia.cotizacion/monedaBean.moneda.cotizacion + ((catalogoBean.itemCatalogo.precioFinal*monedaBean.cotizacionDelDia.cotizacion/monedaBean.moneda.cotizacion)*catalogoBean.porcMarcacion/100 )   }"
                                                  style="font-size: 14px; font-weight: bold;"
                                                  rendered="#{catalogoBean.itemCatalogo.moneda == 'USD' }" >
                                            <f:convertNumber pattern=" ##,##0.00" />
                                    </h:outputText>

                                    <h:outputText value="#{catalogoBean.itemCatalogo.precioFinal/monedaBean.moneda.cotizacion + ((catalogoBean.itemCatalogo.precioFinal/monedaBean.moneda.cotizacion)*catalogoBean.porcMarcacion/100 )   }"
                                                  style="font-size: 14px; font-weight: bold;"
                                                  rendered="#{catalogoBean.itemCatalogo.moneda == 'ARS' }" >
                                            <f:convertNumber pattern=" ##,##0.00" />
                                    </h:outputText>
                                </h:panelGroup>

                            </c:if>



                  <div class="botonesAcciones">

                    <c:if test="#{not empty catalogoBean.itemCatalogo.archivoFichaTecnica}" >

                         <p:commandButton value="Datos Técnicos" icon="info16"                                     
                                                 action="../inventario/fichaTecnica.xhtml" onclick="form.target=_blank"/>

                         <h:outputText value="" />

                   </c:if>

                    <p:commandButton  value="Agregar al Carrito" icon="btnAgregarp" id="btnAceptarFP"
                                      title="Agregar al carrito de compras"
                                      process="@this"
                                      update=":formulario:confirmarCantidad"
                                      oncomplete="PF('dlgCantidad').show()"
                                      rendered="#{usuarioSessionBean.estaRegistrado and  not catalogoBean.itemCatalogo.seleccionado}" >
                    </p:commandButton>

                    <p:commandButton  value="Borrar del Carrito" icon="delete24" title="Borrar producto del carrito"
                                      update=":formulario:confirmarBorrado"
                                      rendered="#{usuarioSessionBean.estaRegistrado and (catalogoBean.itemCatalogo.seleccionado)}"
                                      oncomplete="PF('dlgConfirmarBorrado').show()">
                    </p:commandButton>

                    <p:commandButton id="btnPendiente" icon="btnPendientesI" value="Ver pendientes"
                                     rendered="#{catalogoBean.itemCatalogo.tienePendiente == 'S'}"
                             title="Este producto se encuentra en sus pedidos pendientes"                     
                             process="@this"
                             update=":formulario:pedidosPendientes"
                             oncomplete="PF('dlgPedidosPendientes').show();" >
                    </p:commandButton>
                    <p:tooltip for="btnPendiente" showEffect="fade" hideEffect="fade" rendered="#{catalogoBean.itemCatalogo.tienePendiente == 'S'}" />

                </div>     

                </div>

               </div>


                <h:panelGroup rendered="#{not empty catalogoBean.itemCatalogo.proximoIngreso}" >
                <div class="ui-messages-info ui-corner-all proxIngreso">

                    <span class="ui-messages-info-icon"></span>
                    <span class="ui-messages-error-summary">
                        <h:outputText value="Próximo ingreso: " style="font-weight: bold;" />
                        <h:outputText value="#{catalogoBean.itemCatalogo.proximoIngreso}" style="font-weight: bold;" >
                            <f:convertDateTime pattern="dd/MM/yyyy" />
                        </h:outputText>
                    </span>
                 </div>
                </h:panelGroup>

                 <!-- LISTADO DE SUSTITUTOS -->
                 <div style="width:830px;  margin-right:auto; margin-left:auto;" >
                     <p:panel style="background-color:#EEE; margin-top:50px; margin-bottom:30px;padding-left:30px;" rendered="#{not empty catalogoBean.itemCatalogo.producto.sustitutos }">
                     <ui:include src="../inventario/informacionSustitutos.xhtml" />
                 </p:panel>
                 </div>


               <div style="width:830px; height: auto; margin-right:auto; margin-left:auto;" >
                <p:panel style="background-color:#EEE; margin-bottom:50px; padding-left:30px;"   rendered="#{not empty catalogoBean.itemCatalogo.producto.relacionados }" >
                    <ui:include src="../inventario/informacionRelacionados.xhtml" />
                </p:panel>
               </div>


               <div style="position: relative; float: right; " >
                    <p:commandButton icon="btnVolver" value="Volver"
                                     action="#{catalogoBean.verCatalogo}"
                                     immediate="true"
                                     title="Volver a la vista del catálogo"
                                     process="@this"
                                     update="@form" >
                    </p:commandButton>
                </div>


            </p:panel>

            <!-- CONFIRMAR CANTIDAD -->
            <ui:include src="../inventario/catalogoConfirmaCantidad.xhtml" />

            <!-- CONFIRMAR BORRADO -->
            <ui:include src="../inventario/catalogoConfirmaBorrado.xhtml" />

            <!-- VER SUSTITUTOS -->
            <ui:include src="../inventario/verSustitutos.xhtml" />

            <!-- VER SUSTITUTOS -->
            <ui:include src="../inventario/verSugeridos.xhtml" />

            <!-- LISTA DE PEDIDOS PENDIENTES -->
            <ui:include src="../inventario/catalogoPedidosPendientes.xhtml" />
            
            <!-- PEDIDO PENDIENTE -->
            <ui:include src="../facturacion/pedido.xhtml"  /> 

        </h:form>

    </ui:define>    

</ui:composition>
